{% extends "base.html" %}
{% block content_class %}class="data-rows"{% endblock content_class %}
{% block ngapp %}ServersApp{% endblock ngapp %}
{% block title %}Servers{% endblock %}
{% block breadcrumb %}
<div class="servers--header">
    {% if servers_data|length > 0 or tags|length > 0 %}
    <ul class="filters">
        <li><input type="text" id="server_filter" placeholder='Filter by name'></li>
        <li><input type="text" id="tags" value="{{ tags | empty_if_none }}"
            servers-tags-dropdown data-url="{% url 'api_tags_only_server_tags' %}"
        data-page-url="{% url 'servers' %}" placeholder='Tags' 
        {% if tags|length > 0 %}
            data-size='400'
        {% else %}
            data-size='250'
        {% endif %}>
        </li>
        {% if tags|length > 0 %}

            <li class='bookmark_form'>
                {% if bookmark_id %}
                <a 
                class='button delete' 
                href="{% url 'bookmarks_delete' bookmark_id=bookmark_id %}">Delete Bookmark</a>
                {% else %}
                <form action="{% url 'bookmarks_add' %}" method='post'>
                    {{ bookmark_form.as_ul }}
                    {{ bookmark_form.tags }}
                    {% csrf_token %}
                    <button class='with-icon' data-icon="4" title="Add this set of tags to the top dropdown menu for easy access">Bookmark</button>
                </form>
                {% endif %}
                
            
            </li>

        {% endif %}
        
    </ul>

    
    <ul class="buttons">
        <li><a href="" class=" button install-agent">Install</a></li>
    </ul>
    {% endif %}

</div>
{% endblock breadcrumb %}

{% block content %}
{% if servers_data|length == 0 and tags|length == 0 %}
    {% set welcome = True %}
{% else %}
    {% set welcome = False %}
{% endif %}


<div id="install-agent" {% if welcome %}class='welcome' {% endif %}>
    <table class='install-table'>
    <tr>
        <td>
        {% if welcome %}
            <h3>Welcome to Amon</h3>
        {% endif %}
            {% if not welcome %}
                <a href="#" class="toggle-install-agent-close-button close">x</a>
            {% endif %}
            <p>
            To install/update the collector agent, login to your server(s) via ssh
            and paste the following in the terminal:
            </p>
            <pre><code>API_KEY={{ api_key.key }} bash -c "$(curl -L {% base_url 'install_agent' %})"</code></pre>
            <p>
                If you encounter any problems, please <a href="https://amon.cx/docs#monitoring">see the docs</a> for more details.
            </p>
            {% if not api_key %}
            <p class="error">Can't find a valid API key. Please create one from <a href="{% url 'settings_api' %}">Settings/API</a></p>
            {% endif %}

        </tr>

        {% if welcome %}
        {% endif %}
</table>
</div>

{% if servers_data|length > 0 or tags|length > 0 %}
<div id="dashboard" class="datatables_block" >
<table class="server_filter">
    <thead>
        <tr>
            <th class='server-name-row'><span data-asc="d" data-desc="a" class='label'>Server</span></th>
            <th><span data-asc="d" data-desc="a" class='label'></span></th>

            <th><span data-asc="d" data-desc="a" class='label'>Memory</span></th>
            <th><span data-asc="d" data-desc="a" class='label'>Disk</span></th>
            <th class='processes-row'><span data-asc="d" data-desc="a" class='label'>Top 3 CPU </span></th>
            <th class='processes-row'><span data-asc="d" data-desc="a" class='label'>Top 3 Memory</span></th>
            <th class='plugins-row'><span data-asc="d" data-desc="a" class='label'>Plugins</span></th>
            <th class='last-check-row'><span data-asc="d" data-desc="a" class='label'>Last check</span></th>
        </tr>
    </thead>
    <tbody >
    {% for server in servers_data  %}

        {% set distro = server.server.distro %}

        {% set uptime = server.server.uptime %}
        {% set tags = server.server.tags %}
        {% set processor = server.server.processor %}
        {% set system = server.system %}
        {% set volume_data = server.volume_data %}
        {% set interface_data = server.interface_data %}
        {% set processes = server.processes %}
        
        {% set plugins = server.plugins %}

            <tr id="row-{{ server.server|mongo_id }}" class='server-row' >
            <td data-column='server' data-order='{{ server.server.name }}' data-search="{{ server.server.name }}" >
                {% if system %}
                    <span class="server-meta  {{ distro|get_distro }}"></span>
                {% else %}
                <h5 class='heading-no-data'>{{ server.server.name }}</h5>
                {% endif %}
                    <div class="qtip-tooltip distro-tooltip">
                        <ul class='servers--meta-list'>
                            {% include "servers/_meta_tooltip.html" with server=server.server %}
                        </ul>
                    </div> <!-- tooltip -->
                        {% if system %}
                            <h5><a href="{% url 'server_system' server_id=server.server|mongo_id  %}">{{ server.server.name }}</a></h5>
                        {% endif %}
                        <ul class="servers--tag-list">
                            {% for t in tags  %}
                                <li><span >{{t.group.name}}{% if t.group.name %}:{% endif %}{{ t.name }}</span></li>
                            {% endfor %}
                        </ul>

                 

            </td><!-- end server -->
            <td data-column='cpu' {% if system.cpu.system|floatformat:2 %} data-order='{{ system.cpu.system|sum:system.cpu.user|floatformat:2 }}' {% endif %}>
                {% if system.cpu.system|floatformat:2 %}
                <span class="label dashed">CPU</span>
                <div class="qtip-tooltip cpu">System: {{ system.cpu.system|floatformat:2 }} <br>
                User: {{ system.cpu.user|floatformat:2 }} <br>
                IOWait: {{ system.cpu.iowait|floatformat:2 }} <br>
                Steal: {{ system.cpu.steal|floatformat:2 }}
                </div>
                <div class="container">
                    <span progress-bar class="progress" data-value="{{ system.cpu.system|sum:system.cpu.user|floatformat:2 }}" data-total="100"></span>
                    <span class="data">{{ system.cpu.system|sum:system.cpu.user }}%</span>
                </div>
                {% endif %}
                {% set loadavg_max = system.loadavg.cores * 1.15 %}
                {% if loadavg_max %}

                <span class="label dashed">Load</span>
                <div class="qtip-tooltip load">1 minute: {{ system.loadavg.minute }} <br>
                 5 minutes: {{ system.loadavg.five_minutes }}  <br>
                 15 minutes: {{ system.loadavg.fifteen_minutes }}</div>
                <div class="container">
                    <span progress-bar class="progress" data-value="{{ system.loadavg.five_minutes }}" data-total="{{ loadavg_max }}"></span>
                    <span class="data ">{{ system.loadavg.five_minutes|floatformat:-2 }}</span>
                </div>
                {% endif %}
            </td>

            <td data-column='memory' data-order='{{ system.memory.used_mb }}'>
                {% if system.memory %}
                <span class="label dashed">RAM</span>
                <div class="qtip-tooltip memory">{{ system.memory.used_mb }}MB / {{ system.memory.total_mb }}MB</div>
                <div class="container with-label">
                    <span progress-bar class="progress" data-value="{{ system.memory.used_percent }}" data-total="100"></span>
                    <span class="data">{{ system.memory.used_percent }}%</span>
                </div>
                {% endif %}
                {% if system.memory.swap_total_mb > 0 %}
                <span class="label">Swap</span>
                <div class="container">
                    <span progress-bar class="progress" data-value="{{ system.memory.swap_used_percent }}" data-total="100"></span>
                    <span class="data">{{ system.memory.swap_used_mb }}/{{ system.memory.swap_total_mb }}</span>
                </div>
                {% endif %}
            </td>
            <td data-column='disk'>
                {% for volume, value in volume_data.items %}

                    {% if value.used and value.total %}

                    <span class="label dashed" >{{ volume }}</span>
                    <div class="qtip-tooltip">
                        {{ volume }} <br>{{ value.used }} {{server.server|disk_unit}} / {{ value.total }}{{server.server|disk_unit}}
                    </div>
                    <div class="container">
                        <span progress-bar class="progress" data-value="{{ value.percent }}" data-total="100"></span>
                        <span class="data">{{ value.percent }}%</span>
                    </div>
                    {% endif %}{# value.used/total #}
                {% endfor %}
            </td>
            <td>
                    {% if server.last_check %}

                    {% set total_processes = server.processes.total_processes %}
                    {% set user_processes = server.processes.user_processes %}


                    {% for p  in processes.top_cpu %}
                    <a class='label' href="{% url 'view_process' server_id=server.server|mongo_id %}?process={{p.p}}">{{ p.n }}</a>
                    <div class="container">
                        <span progress-bar class="progress" data-value="{{ p.c }}" data-total="100"></span>
                        <span class="data">{{ p.c }}%</span>
                    </div>
                     {% endfor %}

                     <a data-id="{{ server.server|mongo_id }}" 
                     data-arrow="d"
                     data-url="{% base_url 'ajax_get_process_ignored_data_for_timestamp' %}?server_id={{ server.server|mongo_id }}&timestamp={{ server.last_check }}"
                     data-type="ignored"
                     class='label toggle-processes-table ignored' href="">Ignored {{total_processes|substract_int:user_processes}}</a>
                    

                    {% endif %}
            </td>
            <td>
                {% if server.last_check %}
                    
                    {% for p  in processes.top_memory %}
                     <a class='label' href="{% url 'view_process' server_id=server.server|mongo_id %}?process={{p.p}}">{{ p.n }}</a>
                    <div class="container">
                        <span progress-bar class="progress" data-value="{{ p.m }}" data-total="{{system.memory.total_mb}}"></span>
                        <span class="data">{{ p.m }}MB</span>
                    </div>
                     {% endfor %}

                     <a data-id="{{ server.server|mongo_id }}" 
                     data-arrow="d"
                     data-url="{% base_url 'ajax_get_process_data_for_timestamp' %}?server_id={{ server.server|mongo_id }}&timestamp={{ server.last_check }}"
                     data-type="processes"
                     class='label toggle-processes-table' href="">All</a>

                     


                {% endif %}

                    
            </td>
            <td class='plugins-row'>
                {% for p in plugins  %}
                    <a class="{% if p.error %}plugin-error{% endif %}"
                        href="{% url 'view_plugins' server_id=server.server|mongo_id %}?plugin={{ p.id }}">
                    {{ p.name }}
                    </a>
                    {% if p.error  %}
                        <span class="qtip-tooltip error-tooltip">{% spaceless %}

                        {% if p.last_check < server.last_check %}
                            {{ p.name }} has not sent any data since {{ p.last_check|datetime_local:request.timezone|empty_if_none }}.
                        {% endif %}
                        {% if p.error_message %}
                            {{ p.error_message }}
                        {% endif %}
                        {% endspaceless %}</span>
                    {% endif %}

                {% endfor %}
            </td>
            <td data-column='last-check' data-order='{% if server.last_check %}{{ server.last_check }}{% else %}0{% endif %}' data-search="{{ provider }}">
                    <a href="#" class='settings amon' data-dropdown="settings-menu-{{ server.server|mongo_id }}" data-options="is_hover:true">d</a>
                    <ul id='settings-menu-{{ server.server|mongo_id }}' class="f-dropdown tiny settings-menu" data-dropdown-content>
                        <li><a  href="{% url 'edit_server' server_id=server.server|mongo_id  %}" data-icon="e">Edit</a></li>

                        <li>
                            <a data-rowid="{{ server.server|mongo_id }}" class='delete_row' data-icon="b" href="#">Delete</a>
                        </li>

                    </ul>

                <div class="delete-row" id="delete-row-{{ server.server|mongo_id }}">
                    <p>
                        Are you sure you want to delete this server <strong>({{ server.server.name }})</strong> and all it's data ?
                    </p>
                    <ul>
                        <li>
                            <a href="{% url 'delete_server' server_id=server.server|mongo_id  %}" class="button delete">Delete</a>
                        </li>
                        <li>
                            <a data-rowid="{{ server.server|mongo_id  }}" href="" class="button cancel">Cancel</a>
                        </li>
                    </ul>
                </div>
                {% if server.last_check %}
                    <span title="{{ server.last_check|datetime_local:request.timezone }}" time-ago class="last_check">{{ server.last_check }}</span>
                    <div class="qtip-tooltip">
                        {{ server.last_check|datetime_local:request.timezone }}
                    </div>
                {% else %}

                {% endif %}


            </td>



        </tr>
        {% endfor %} {# server data #}
</tbody>
</table>

{% for server in servers_data  %}
<div class='processes-wrapper' id="processes-{{ server.server|mongo_id }}">
<table class="processes-table" id="processes-table-{{ server.server|mongo_id }}" data-id="{{ server.server|mongo_id  }}">
    <thead>
        <tr>
            <th><span data-asc="d" data-desc="a" class='label'>Process</span></th>
            <th><span data-asc="d" data-desc="a" class='label'>CPU</span></th>
            <th><span data-asc="d" data-desc="a" class='label'>Memory(used)</span></th>
            <th><span data-asc="d" data-desc="a" class='label'>I/O(read/write)</span></th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</div>




{% endfor %} {# server data #}


{% endif %} {# server data length #}



</div><!-- Dashboard END -->


{% endblock %}
{% block js %}
<script type="text/javascript" charset="utf-8" src='{{ STATIC_URL }}js/libs/jquery.datatables.beta.min.js'></script>
<script type="text/javascript" charset="utf-8" src='{{ STATIC_URL }}js/libs/charts.min.js'></script>
<script type="text/javascript" src='{{ STATIC_URL }}js/delete.row.js'></script>
<script type="text/javascript" src='{{ STATIC_URL }}js/servers.js'></script>
{% if request.devmode == True %}
    <script type="text/javascript" src='{{ STATIC_URL }}js/apps/angular.servers.js'></script>
{% endif %}
{% endblock js %}
